import React, { Component } from "react";

class App extends Component {
  state = {
    name: "zhangsan",
    show: true,
    list: [
      {
        id: 1,
        name: "🍎",
        price: 2,
      },
      {
        id: 2,
        name: "🍌",
        price: 3,
      },
    ],
    content: "<h1>标题标题</h1>",
    arr: [
      [1, 2, 3],
      [4, 5, 6],
    ],
  };

  fn() {
    // this.setState((prevState) => {
    //   return {
    //     show: !prevState.show,
    //   };
    // });
    this.setState((prevState) => ({
      show: !prevState.show,
    }));
  }

  fn2() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // list: prevState.list.push({ id: 3, name: "🍉", price: 4 }), ×
    //       // list: prevState.list.concat({ id: 3, name: "🍉", price: 4 }), √
    //       list: [...prevState.list, { id: 3, name: "🍉", price: 4 }],
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    this.state.list.push({ id: 3, name: "🍉", price: 4 });
    this.setState({});
  }

  render() {
    const { name, show, list, content, arr } = this.state;
    return (
      <>
        <h2>数据渲染</h2>
        <p>{name}</p>
        {/* 属性和文本一样使用大括号 */}
        <p title={name}>123456</p>
        {show && <p>hello</p>}
        <button onClick={this.fn.bind(this)}>btn</button>

        {list.map((item) => (
          <div key={item.id}>
            {item.name}的价格为{item.price}
          </div>
        ))}

        <button onClick={this.fn2.bind(this)}>btn2</button>

        {/* 相当于v-html */}
        <div dangerouslySetInnerHTML={{ __html: content }}></div>

        <ul>
          {arr.map((item) => {
            return item.map((value) => {
              return <li key={value}>{value}</li>;
            });
          })}
        </ul>
      </>
    );
  }
}

export default App;
